<script setup>
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue'

import {useRoute, useRouter} from "vue-router"
import {articleListService} from '/src/api/Article.js'
import {ref} from "vue";

const router = useRouter()
const route = useRoute()

//获取文章详情
const getDetails = (item) => {
  router.push({name:'articledetails',params:{id:item.id}})

}

//用户搜索时选中的分类id
const categoryId = ref(route.params.type)

//用户搜索时选中的发布状态
const status = ref(1)
//分页条数据模型
const pageNum = ref(1)   //当前页
const total = ref()            //总条数
const pageSize = ref(5)  //每页条数
const articlelist = ref()

//当每页条数发生了变化，调用此函数
const onSizeChange = (size) => {
  pageSize.value = size
  articleList()
}
//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
  pageNum.value = num
  articleList()
}

//判断分类文章列表是否为空
const isEmpty = ref(true)

//日期格式转换
const formatDate = (dateString) => {
  const date = new Date(dateString);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以加1
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
}

//获取文章列表数据
const articleList = async () => {
  console.log("获取的分类:"+categoryId.value)

  let params = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    categoryId: categoryId.value ? categoryId.value : null,
    status: status.value ? status.value : null
  }

  let result = await articleListService(params);

  articlelist.value = result.data.items
  total.value = result.data.total
  if (total.value > 0)isEmpty.value = false;
}
articleList();

</script>

<template>
  <el-container>
    <el-aside width="20%">

    </el-aside>

    <el-main>
      <el-row style="margin-bottom: 10px;">
        <el-col :span="24">
          <el-card>
            <div style="display: flex;justify-content: center;">
                <span v-if="categoryId == 1" style="font-size: 25px;">技术分享</span>
                <span v-else-if="categoryId == 2" style="font-size: 25px;">学习笔记</span>
                <span v-else-if="categoryId == 3" style="font-size: 25px;">随心所写</span>
                <span v-else-if="categoryId == 4" style="font-size: 25px;">剑指Offer</span>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <el-row v-if="isEmpty">
        <el-col :span="24">
          <el-empty description="暂无文章" :image-size="300"/>
        </el-col>
      </el-row>
      <el-row v-else v-for="(item,index) in articlelist" style="margin-bottom: 15px;">
        <el-col  :span="24" style="margin-bottom: 10px;">
          <el-card shadow="hover">
            <template #header>
              <div class="card-header">
                <span style="align-content: center;font-size: 30px;">{{item.title}}</span>
              </div>
            </template>
            <div>
              <!--              卡片左上角标签-->
              <div class="ribbon">
                <span v-if="item.category === 1">技术分享</span>
                <span v-else-if="item.category === 2">学习笔记</span>
                <span v-else-if="item.category === 3">随心所写</span>
                <span v-else-if="item.category === 4">剑指Offer</span>
                <span v-else>未知分类</span>
              </div>

              <div class="content">
                <div class="content-info">
                  <span style="display:flex;align-items: center;">
                    <img src="/src/assets/images/Calendar-icon.png" style="width: 16px;height: 16px;">
                    <span>{{formatDate(item.createtime)}}</span>
                  </span>
                  <span style="display:flex;align-items: center;">
                    <img src="/src/assets/images/Like-icon.png" style="width: 16px;height: 16px;">
                    <span>{{item.likenumber}}</span>
                  </span>
                </div>
                <div class="content-text">
                  <p>{{item.abstracts}}</p>
                  <p><el-image :fit="'fill'" :src="item.coverurl"/></p>
                </div>
              </div>
            </div>
            <template #footer>
              <div class="card-footer">
                <!--                <span>Footer content</span>-->
                <span>
                  <el-button type="success" round @click="getDetails(item)" size="large">查看原文</el-button>
                </span>
                <!--                <span>-->
                <!--                  <el-button type="primary" round><el-icon><CaretTop /></el-icon>点赞</el-button>-->
                <!--                  <el-button type="warning" round><el-icon><Star /></el-icon>收藏</el-button>-->
                <!--                </span>-->
              </div>
            </template>
          </el-card>
        </el-col>
      </el-row>

<!--      <el-row style="margin-bottom: 15px;">-->
<!--        <el-col :span="24">-->
<!--          <el-card shadow="hover">-->
<!--            <div class="ribbon"><span>技术分享</span></div>-->
<!--            <template #header>-->
<!--              <div class="card-header">-->
<!--                <span style="align-content: center">Card Title</span>-->
<!--              </div>-->
<!--            </template>-->
<!--            <div>-->
<!--              <div class="info">-->
<!--                <span>-->
<!--                  <el-avatar-->
<!--                      src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"-->
<!--                  />-->
<!--                </span>-->
<!--                <span>-->
<!--                  UserName-->
<!--                </span>-->
<!--              </div>-->

<!--              &lt;!&ndash;              卡片左上角标签&ndash;&gt;-->


<!--              <div class="content">-->
<!--                <div class="content-info">-->
<!--                  <span style="display:flex;align-items: center;">-->
<!--                    <img src="/src/assets/images/Calendar-icon.png" style="width: 16px;height: 16px;">-->
<!--                    <span>2024-05-08</span>-->
<!--                  </span>-->
<!--                  <span style="display:flex;align-items: center;">-->
<!--                    <img src="/src/assets/images/Like-icon.png" style="width: 16px;height: 16px;">-->
<!--                    <span>100</span>-->
<!--                  </span>-->
<!--                </div>-->
<!--                <div class="content-text">-->
<!--                  <p>Aimer ce n'est pas se regarder l'un l'autre mais regarder ensemble dans la meme direction.-->
<!--                  </p>-->
<!--                  <p>爱不是相互凝望,而是朝同一个方向看去。</p>-->
<!--                  <p><el-image :fit="'fill'" src="https://img1.baidu.com/it/u=1832620790,2486462626&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"/></p>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--            <template #footer>-->
<!--              <div class="card-footer">-->
<!--                &lt;!&ndash;                <span>Footer content</span>&ndash;&gt;-->
<!--                <span>-->
<!--                  <el-button type="success" round @click="getDetails">查看原文</el-button>-->
<!--                </span>-->
<!--                <span>-->
<!--                  <el-button type="primary" round><el-icon><CaretTop /></el-icon>点赞</el-button>-->
<!--                  <el-button type="warning" round><el-icon><Star /></el-icon>收藏</el-button>-->
<!--                </span>-->
<!--              </div>-->
<!--            </template>-->
<!--          </el-card>-->
<!--        </el-col>-->
<!--      </el-row>-->

      <!--分页区域-->
      <el-row style="margin-bottom: 10px;">
        <el-col :span="24">
          <el-card>
            <div style="display: flex;justify-content: center;">
              <el-pagination background layout="prev, pager, next,jumper"
                             v-model:page-size="pageSize"
                             v-model:current-page="pageNum"
                             :total="total"
                             @size-change="onSizeChange"
                             @current-change="onCurrentChange"
              />
            </div>
          </el-card>
        </el-col>
      </el-row>

    </el-main>

    <el-aside width="20%">

    </el-aside>
  </el-container>

</template>



<style scoped>
.info{
  display: flex;
  align-items: center;
}
.content-info{
  display: flex;
  justify-content: space-between;
  /*justify-content: center;*/
  align-items: center;
}
.card-footer{
  display: flex;
  align-content: center;
  justify-content: space-between;
}

/* HTML: <div class="ribbon">Your text content</div> */
.ribbon {
  font-size: 20px;
  font-weight: bold;
  color:#fff;
}
.ribbon {
  --f: .5em; /* control the folded part*/
  --r: .8em; /* control the ribbon shape */

  position: absolute;
  right: 20px;
  top: calc(-1*var(--f));
  padding: .2em;
  background-color: #ff2521;
  border-right: var(--f) solid #0005;
  border-bottom: var(--r) solid #0000;
  clip-path: polygon(calc(100% - var(--f)) 0,0 0,0 calc(100% - var(--r)),calc(50% - var(--f)/2) 100%,calc(100% - var(--f)) calc(100% - var(--r)),calc(100% - var(--f)) var(--f),100% var(--f));
}

.header-box {
  position: relative;
  transform-style: preserve-3d;
}
.header-box::before {
  content: "";
  position: absolute;
  inset: 0px;
  background: conic-gradient(from 90deg at 40% -25%, #ffd700, #f79d03, #ee6907, #e6390a, #de0d0d, #d61039, #cf1261, #c71585, #cf1261, #d61039, #de0d0d, #ee6907, #f79d03, #ffd700, #ffd700, #ffd700);
  filter: blur(10px);
  transform: translate3d(4px,-2px,-1px);
  clip-path: polygon(-100vmax -100vmax,100vmax -100vmax,100vmax 100vmax,-100vmax 100vmax,-100vmax -100vmax,calc(0px - 4px) calc(0px - -2px),calc(0px - 4px) calc(100% - -2px - 0px),calc(100% - 4px - 0px) calc(100% - -2px - 0px),calc(100% - 4px - 0px) calc(0px - -2px),calc(0px - 4px) calc(0px - -2px));
  pointer-events: none;
}
</style>